<template>
	<view class="container">
		<view class="avatar item" @click="handleChangeAvatar">
			<image v-if="userAvatar != ''" :src="userAvatar" alt="" />
			<image v-else :src="userInfo.avatar_image" alt="" />
			<text>更改头像</text>
		</view>
		<view class="user item">
			<text>用户昵称</text>
			<input type="text" v-model="userInfo.nickname" @blur="getInputVal" />
		</view>
		<view class="btn" @click="handleSubmit">确认修改</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				userName: '',
				userAvatar: ''
			}
		},
		onLoad() {
			console.log(this.userInfo, 123123123);
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			handleChangeAvatar() {
				let that = this;
				uni.showActionSheet({
					itemList: ['从相册选择'],
					success: (res) => {
						//选择头像上传
						uni.chooseImage({
							count: 1,
							sizeType: ["compressed"],
							sourceType: ["album"],
							success: async (res) => {
								console.log(res);
								var url = "https://qsxtest.jinjuwx.com/api/addons/yun_shop/api.php?mid=" + this.userInfo.uid + "&shop_id=null&route=upload.uploadPic";
								// #ifdef APP-PLUS
								url += `&type=7&i=4`
								// #endif
								// #ifdef H5
								url += `&type=5&i=4`
								// #endif
								console.log(res.tempFiles[0]);
								let data = res.tempFiles[0]
								uni.uploadFile({
									url: url,
									name: 'file',
									file: data,
									formData: {
										file: data
									},
									success: (res) => {
										this.userAvatar = JSON.parse(res.data).data.img_url
										console.log(JSON.parse(res.data).data.img_url);
									}
								});
							}
						})
					}
				})
			},
			getInputVal(e) {
				this.userName = e.detail.value
			},
			handleSubmit() {
				let apiUrl = '/addons/yun_shop/api.php?route=member.member.updateAvatar&ingress=weChatApplet&validate_page=1&app_type=wechat'
				let apiParams = {
					avatar: this.userAvatar || this.userInfo.avatar_image,
					nickname: this.userName || this.userInfo.nickname
				}
				this.$api.post(apiUrl, {data: apiParams}).then(res => {
					if (res.result == 1) {
						uni.showToast({
							title: '修改成功！'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/prefile/prefile'
							})
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 25rpx;
		display: flex;
		flex-direction: column;
	}

	.avatar {
		padding: 12rpx 30rpx;

		image {
			width: 83rpx;
			height: 83rpx;
			border-radius: 50%;
		}
	}

	.user {
		padding: 30rpx 17rpx;

		input {
			direction: rtl;
		}
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		margin-top: 25rpx;
		border-radius: 10rpx;
		color: #000;
	}

	.btn {
		@include bg-style(#E0C387, 700rpx, 98rpx, 50rpx);
		@include flex-box();
		color: #fff;
		margin-top: 200rpx;
	}
</style>
